<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>具名 slot</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>


<body>
    <div id="app">

        <h3>给 &lt;slot&gt; 元素指定一个name后可以分发多个内容，具名Slot可以与单个Slot共存</h3>

        <hr/>

        <child-component>
            <h2 slot="header">标题</h2>
            <p>分发的内容</p>
            <p>分发的内容</p>
            <div slot="footer">底部信息</div>
        </child-component>

    </div>
</body>

<script type="text/javascript">
    // 注册组件
    Vue.component('child-component', {
        template: '<div class="container">\
                        <div class="header">\
                            <slot name="header"></slot>\
                        </div>\
                        <div class="main">\
                            <slot></slot>\
                        </div>\
                        <div class="footer">\
                            <slot name="footer"></slot>\
                        </div>\
                    </div>'
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app"
    })
</script>

</html>